<html>
    <head>
        <title>附加选项</title>
    </head>
    <body>
        <script>
             /*
                        五、附加选项   Additional Options
                                                    
                                本节展示了捆绑打包和压缩的其他有用选项：

                                1、捆绑包模式  Bundling Mode
                                
                                            ABP将捆绑文件单独添加到development环境的页面中。它会自动为其他环境捆绑和缩小（staging，production…）。

                                            大多数时候，这是您想要的行为。

                                            但是，在某些情况下，您可能需要手动配置它。
                                            
                                            有四种模式：

                                                    ①、Auto：根据环境自动确定模式。

                                                    ②、None：没有捆绑或压缩。

                                                    ③、Bundle：捆绑但未压缩。

                                                    ④、BundleAndMinify：捆绑和压缩。

                                            您可以在模块的ConfigureServices中配置AbpBundlingOptions：
                                            
                                                        Configure<AbpBundlingOptions>(options =>
                                                        {
                                                            options.Mode = BundlingMode.Bundle;
                                                        });



                                2、忽略特定文件的压缩

                                            可以忽略对特定文件的压缩。

                                            eg:
                                                Configure<AbpBundlingOptions>(options =>
                                                {
                                                    options.MinificationIgnoredFiles.Add("/scripts/myscript.js");
                                                });

                                            给定的文件仍会添加到捆绑包中，但在这种情况下不会缩小。


                                3、异步加载 JavaScript 和  CSS

                                            您可以配置AbpBundlingOptions以异步加载所有或单个js/css文件。

                                            eg:
                                                Configure<AbpBundlingOptions>(options =>
                                                {
                                                    options.PreloadStyles.Add("/__bundles/Basic.Global");
                                                    options.DeferScriptsByDefault = true;
                                                });

                                             输出html：

                                                    <link rel="preload" href="/__bundles/Basic.Global.F4FA61F368098407A4C972D0A6914137.css?_v=637697363694828051" as="style" onload="this.rel='stylesheet'"/>
                                                    <script defer src="/libs/timeago/locales/jquery.timeago.en.js?_v=637674729040000000"><//script>



                                4、外部/CDN文件支持

                                            捆绑系统会自动识别外部/CDN文件并将它们添加到页面中，而无需进行任何更改。

                                            （1）、在AbpBundlingOptions中使用外部/CDN文件：

                                                            Configure<AbpBundlingOptions>(options =>
                                                            {
                                                                options.StyleBundles
                                                                    .Add("MyStyleBundle", configuration =>
                                                                    {
                                                                        configuration
                                                                            .AddFiles("/styles/my-style1.css")
                                                                            .AddFiles("/styles/my-style2.css")
                                                                            .AddFiles("https://cdn.abp.io/bootstrap.css")  //外部cdn文件
                                                                            .AddFiles("/styles/my-style3.css")
                                                                            .AddFiles("/styles/my-style4.css");
                                                                    });

                                                                options.ScriptBundles
                                                                    .Add("MyScriptBundle", configuration =>
                                                                    {
                                                                        configuration
                                                                            .AddFiles("/scripts/my-script1.js")
                                                                            .AddFiles("/scripts/my-script2.js")
                                                                            .AddFiles("https://cdn.abp.io/bootstrap.js") // 外部cdn文件
                                                                            .AddFiles("/scripts/my-script3.js")
                                                                            .AddFiles("/scripts/my-script4.js");
                                                                    });
                                                            });

                                                        输出如下html：

                                                                <link rel="stylesheet" href="/__bundles/MyStyleBundle.EA8C28419DCA43363E9670973D4C0D15.css?_v=638331889644609730" />
                                                                <link rel="stylesheet" href="https://cdn.abp.io/bootstrap.css" />
                                                                <link rel="stylesheet" href="/__bundles/MyStyleBundle.AC2E0AA6C461A0949A1295E9BDAC049C.css?_v=638331889644623860" />

                                                                <script src="/__bundles/MyScriptBundle.C993366DF8840E08228F3EE685CB08E8.js?_v=638331889644937120"></、script>
                                                                <script src="https://cdn.abp.io/bootstrap.js"></、script>
                                                                <script src="/__bundles/MyScriptBundle.2E8D0FDC6334D2A6B847393A801525B7.js?_v=638331889644943970"></、script>
                                            
                                            (2)、在标签助手中使用外部/CDN文件。

                                                        <abp-style-bundle name="MyStyleBundle">
                                                            <abp-style src="/styles/my-style1.css" />
                                                            <abp-style src="/styles/my-style2.css" />
                                                            <abp-style src="https://cdn.abp.io/bootstrap.css" />
                                                            <abp-style src="/styles/my-style3.css" />
                                                            <abp-style src="/styles/my-style4.css" />
                                                        </abp-style-bundle>

                                                        <abp-script-bundle name="MyScriptBundle">
                                                            <abp-script src="/scripts/my-script1.js" />
                                                            <abp-script src="/scripts/my-script2.js" />
                                                            <abp-script src="https://cdn.abp.io/bootstrap.js" />
                                                            <abp-script src="/scripts/my-script3.js" />
                                                            <abp-script src="/scripts/my-script4.js" />
                                                        </abp-script-bundle>

                                                     输出如下html:

                                                            <link rel="stylesheet" href="/__bundles/MyStyleBundle.C60C7B9C1F539659623BB6E7227A7C45.css?_v=638331889645002500" />
                                                            <link rel="stylesheet" href="https://cdn.abp.io/bootstrap.css" />
                                                            <link rel="stylesheet" href="/__bundles/MyStyleBundle.464328A06039091534650B0E049904C6.css?_v=638331889645012300" />

                                                            <script src="/__bundles/MyScriptBundle.55FDCBF2DCB9E0767AE6FA7487594106.js?_v=638331889645050410"></\script>
                                                            <script src="https://cdn.abp.io/bootstrap.js"></\script>
                                                            <script src="/__bundles/MyScriptBundle.191CB68AB4F41C8BF3A7AE422F19A3D2.js?_v=638331889645055490"></\script>
                    */
        </script>
    </body>
</html>